<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item title="头像" :titleStyle="{  fontSize: '30rpx'}">
					<view style="display: flex;">
						<view style="flex-grow: 1;">
							<button class="btn-avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							</button>
						</view>
						<view @click="showImag">
							<u-image :showLoading="true" shape="circle" :src="userInfo.avatar" width="150rpx"
								height="150rpx">
							</u-image>
						</view>
					</view>
				</u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item title="昵称" :titleStyle="{  fontSize: '30rpx'}">
					<input ref="nickNameIput" type="nickname" v-model="userInfo.userName" maxlength="16"
						@blur="userNameInput()" />
					</button>
				</u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item title="手机号码" :titleStyle="{  fontSize: '30rpx'}">
					<input ref="phoneIput" v-model="userInfo.phonenumber" maxlength="11" @blur="userPhoneInput()"
						placeholder="请输入手机号" />
					</button>
				</u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item title="微信号" :titleStyle="{  fontSize: '30rpx'}">
					<input ref="wxAccountInput" v-model="userInfo.wxAccount" maxlength="16" @blur="wxAccountInput()"
						placeholder="请输入微信号" />
					</button>
				</u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item @click="showPicker" title="性别" :titleStyle="{  fontSize: '30rpx'}">
					{{userInfo.sex == 1 ? '女' : '男'}}
					<u-picker @confirm="chooseGender" mode="selector" v-model="show" :default-selector="[0]"
						:range="selectorObj" range-key="cateName"></u-picker>
				</u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import {
		getHost,
		fileApis,
		ucenterApis
	} from '@/apis/index';

	export default {
		data() {
			return {
				show: false,
				userInfo: {
					userId: '',
					userName: '',
					sex: '',
					avatar: '',
					phonenumber: '',
					wxAccount: ''
				},
				selectorObj: [{
					cateName: '女',
					value: 1,
				}, {
					cateName: '男',
					value: 0,
				}],
				overSizeAlert: {
					type: 'warning',
					title: "手机号码超出限制!",
					duration: 4000,
				},
				nickNameSizeAlert: {
					type: 'warning',
					title: "昵称超过限制!",
					duration: 4000,
				},
				wxAccountSizeAlert: {
					type: 'warning',
					title: "微信账号超过限制!",
					duration: 4000,
				},
			}
		},
		methods: {
			showPicker() {
				this.show = true
			},

			showToast(params) {
				this.$refs.uToast.show(params)
			},

			chooseGender(e) {
				var that = this;

				const index = e[0];
				that.userInfo.sex = that.selectorObj[index].value

				let user = {
					sex: that.userInfo.sex
				}

				ucenterApis.updateUserInfo(user).then((res) => {
					//更新缓存
					that.$store.dispatch('setSex', that.userInfo.sex);

					//重新加载用户信息
					uni.$emit('userInfoUpdated', true);
				})
			},

			userNameInput() {
				var that = this;

				let user = {
					userName: that.userInfo.userName
				}

				if (that.userInfo.userName.length > 16) {
					that.showToast(that.nickNameSizeAlert)
					return
				}

				ucenterApis.updateUserInfo(user).then((res) => {
					//更新缓存
					that.$store.dispatch('setUserName', that.userInfo.userName);

					//重新加载用户信息
					uni.$emit('userInfoUpdated', true);
				})


			},

			userPhoneInput() {
				var that = this;

				if (that.userInfo.phonenumber.length > 11) {
					that.showToast(that.overSizeAlert)
					return
				}

				let user = {
					phonenumber: that.userInfo.phonenumber
				}

				ucenterApis.updateUserInfo(user).then((res) => {
					//更新缓存
					that.$store.dispatch('setPhonenumber', that.userInfo.phonenumber);

					//重新加载用户信息
					uni.$emit('userInfoUpdated', true);
				})
			},

			wxAccountInput() {
				var that = this;

				if (that.userInfo.wxAccount.length > 16) {
					that.showToast(that.wxAccountSizeAlert)
					return
				}

				let user = {
					wxAccount: that.userInfo.wxAccount
				}

				ucenterApis.updateUserInfo(user).then((res) => {
					//更新缓存
					that.$store.dispatch('setWxAccount', that.userInfo.wxAccount);

					//重新加载用户信息
					uni.$emit('userInfoUpdated', true);
				})
			},

			showImag() {
				wx.previewImage({
					current: this.userInfo.avatar, // 当前显示图片的http链接
					urls: [this.userInfo.avatar] // 需要预览的图片http链接列表
				})
			},

			onChooseAvatar(res) {
				var that = this;

				wx.cropImage({
					src: res.detail.avatarUrl, // 图片路径
					cropScale: '1:1', // 裁剪比例   微信官方提供了多种裁剪比例以供选择
					success: function(res) {

						const userToken = uni.getStorageSync('userToken')
						const requestUrl = getHost() + '/wx/avatarFile/uploadAvatar'

						let config = fileApis.uploadFile(requestUrl, userToken, res.tempFilePath)
						config.then((res) => {
							let url = getHost() + res.data.url;
							that.$store.dispatch('setAvatar', url);
							that.userInfo.avatar = url;
						})
					},
					complete: (res) => {
						// console.log(res, "裁剪调用结束");
					}
				});
			},
		},
		mounted() {
			let userInfo = this.$store.state.wxUser;

			console.log(userInfo)
			this.userInfo = userInfo;
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ededed;
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
			//点击后灰色
		}
	}


	.btn-avatar {
		flex-grow: 1;
		height: 150rpx;
		background-color: #FFFFFF;
		border: none;
		background-color: transparent;
		outline: none;
	}

	button::after {
		border: none;
	}

	.tag-item {
		// border: 1px red solid;
	}
</style>